<template>
    <div class="login">
        <div class="login_warp">
            <div class="login_left">
                <img src="https://img.zcool.cn/community/0115635c8c79f5a801208f8bccbead.gif" alt="">
            </div>
            <div class="login_right">
                <h2>学生后台管理登录</h2>
                <div class="right_inp">
                    <el-input placeholder="请输入账号admin" prefix-icon="el-icon-user" v-model="input1">
                    </el-input>
                    <el-input type="password" placeholder="密码123456" prefix-icon="el-icon-unlock" v-model="input2">
                    </el-input>
                    <el-checkbox @change="che" style="text-align: left" v-model="checked">记住密码</el-checkbox>
                    <div style="width: 35vh;height: 6vh;"> <el-button style="height: 100%;width: 100%;" type="primary"
                            @click="logininfo">登录</el-button></div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { login } from "../../api/https"
export default {
    data() {
        return {
            checked: false,
            input1: '',
            input2: '',
        }
    },
    methods: {
        che() {
            if (this.checked) {
                localStorage.setItem("username", this.input1)
                localStorage.setItem("pwd", this.input2)
            } else {
                localStorage.removeItem("username")
                localStorage.removeItem("pwd")
            }
        },
        logininfo() {
            let data = {
                username: this.input1,
                pwd: this.input2
            }
            login(data).then((result) => {
                console.log(result);
                if (result.code == 0) {
                    this.$notify({
                        title: '欢迎您',
                        message: '登录成功🎊🎊🎊🍕🍕🍕',
                        type: 'success'
                    });
                    localStorage.setItem("token", result.data.token)
                    this.$router.push({ name: 'home' }); // 假设你已经在Vue Router中定义了一个名为'home'的路由
                }
            }).catch((err) => {
                console.log(err);
            });
        }
    }
}
</script>
<style>
.el-checkbox:last-of-type {
    margin-right: 20vh;
}

.el-input .el-input__inner {
    border: none;
    border-radius: 0;
    border-bottom: 0.1vh solid #ccc;
}

.login_warp {
    width: 100vh;
    height: 53vh;
    background-color: #fff;
    border-radius: 2vh;
    display: flex;
    overflow: hidden;
    box-shadow: 0 0 1vh rgba(0, 0, 0, .3);

    .login_left {
        width: 50%;
        width: 100%;

        img {
            width: 100%;
            height: 100%;
        }
    }

    .login_right {
        width: 50%;
        width: 100%;

        h2 {
            text-align: center;
        }

        .right_inp {
            width: 70%;
            margin-left: 7vh;
            line-height: 8vh;

            /* display: flex;
            flex-wrap: wrap;
            justify-content: center;
            margin: 0 auto; */
        }
    }
}

.login {
    width: 100%;
    height: 100vh;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url(https://img.zcool.cn/community/0142735d9eac93a801211d537a2fee.png?x-oss-process=image/format,webp)
}
</style>